﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <link rel="stylesheet" href="/css/pointerFeedback.css">
    <script src="/js/pointerFeedback.js"></script>
</head>

<body class="win-type-body">
    <div id="scenarioHeader">
        <h2 id="sampleHeader" class="win-type-subheader">Description:</h2>
        <div id="scenarioDescription">
            Tap and click feedback
        </div>
    </div>
    <div id="input">
        <p>
            Use the Pointer Up and Pointer Down animations to show tap and click feedback on elements. These animations should be used on elements that can be interacted with and can trigger actions. They should not be used on elements that are disabled or on standard
            web controls that already have other feedback, such as buttons.
        </p>
    </div>
    <div id="output">
        <div class="example">
            <h3 class="win-type-title">Applied to different sized elements:</h3>
            <p>Click or tap on the boxes below to see the animation.</p>
            <div id="target1" class="large">
                200 pixels
            </div>
            <div id="target2" class="medium">
                100 pixels
            </div>
            <div id="target3" class="small">
                50 pixels
            </div>
        </div>
    </div>
</body>

</html>